<template>
  <div id="login">
    <TopTittle>
      <h1>登录</h1>
    </TopTittle>
    <h5>您好，<br />欢迎来到建设银行</h5>
    <div class="form-login" id="form-login">
      <div>
        <input
          id="phone_number"
          type="text"
          placeholder="请输入用户名"
          v-model="name"
        />
      </div>
      <div>
        <input
          id="password"
          type="password"
          placeholder="请输入密码"
          v-model="password"
        />
      </div>
      <div id="login_button">
        <button @click="login">登录</button>
      </div>
    </div>
    <div id="blue-text">
      <span @click="$router.push('/register')">还没账号?去注册</span>
    </div>
    <div id="argee">
      <div>
        <input type="checkbox"  />
        <span>本人已认真阅读并同意</span>
      </div>
      <p>《中国建设银行股份有限公司电子银行个人客户服务协议》</p>
      <p>《中国建设银行股份有限公司个人信息保护政策》</p>
    </div>
  </div>
</template>

<script>
import { login_list } from "@/apis/user";
import TopTittle from "@/components/index/TopTittle.vue";
// import cookies from "js-cookie";
export default {
    data() {
        return {
            name: "",
            password: "",
        };
    },
    methods: {
        login() {
            // let reg =
            // /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
            if (this.name.trim() != "" && this.password.trim() != "") {
                login_list({ name: this.name, password: this.password }).then((res) => {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        this.$toast.fail(res.data.message);
                    }
                    else if (res.data.code == 1) {
                        this.$toast.success(res.data.message);
                        localStorage.setItem("token", res.data.data.username); //本地创建token
                        // cookies.set('token',res.data.data.username)
                        this.$router.push("/index");
                        // this.$router.go(-1);
                    }
                    else {
                        this.$toast.fail(res.data.message);
                    }
                });
            }
            else {
                this.$toast.fail("输入格式不规范");
            }
        },
    },
    components: { TopTittle }
};
</script>

<style lang="scss">
body {
  height: 100%;
  width: 100%;
  //background-image: url("../assets/bg.jpg");
  //background-size: cover;
}
#login {
  display: flex;
  flex-direction: column;
  justify-content: start;

  background-color: rgba(255, 255, 255);
  height: 6.27rem;
  // width: 90%;

  border-radius: 0.13rem;
  margin: 0.13rem auto;
  position: relative;

  h5 {
    font-size: 0.32rem;
    margin: 0.27rem;
    font-weight: 400;
  }
  #form-login {
    height: 2.27rem;
    width: 4.59rem;
    margin: 0 auto;
    //border:  0.01rem solid black;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    div {
      height: 0.67rem;
      width: 80%;
      margin: 0.13rem auto;
      input {
        //height: 3.125rem;
        width: 100%;
        border: none;
        border-bottom: 0.01rem solid gray;
        height: 0.4rem;
      }
    }
    #login_button {
      //height: 3.125rem;
      width: 80%;
      button {
        height: 0.4rem;
        width: 100%;
        background-color: #136ab7;
      }
    }
  }
  #blue-text {
    display: block;
    //margin: 0.53rem auto;
    height: 0.27rem;
    width: 80%;
    margin-left: 5%;
    span {
      color: #136ab7;
    }
  }
  #argee {
    width: 90%;
    position: absolute;
    bottom: 0.7rem;
    left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: start;

    p {
      font-size: 0.12rem;
    }
    #argee > span {
      display: block;
    }
  }
}

.ok {
  font-size: 0.16rem;
}
.ok input {
  display: block;
}
</style>